<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../dist/css/lanai-ui.min.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content no-padding">
			<div class="topbox">
				<div class="box-body pull-right">
					<div class="form-inline">
						<div class="input-group">	
							<span class="input-group-addon">
								<i class="fa fa-barcode"></i>
							</span>
							<input type="text" class="form-control" placeholder="扫码查询..." />
							<div class="input-group-btn">
			                  	<button type="button" class="btn btn-success"><i class="fa fa-search"></i> 查询</button>
		                <button type="button" class="btn btn-primary">保存</button>
			                </div>
						</div>
	                </div>
	            </div>
        	</div>
			<div class="box box-widget no-shadow">
				<div class="box-body">
					<h3>按钮主题</h3>
					<p>按钮样式<code>.btn</code> 
						默认按钮<code>.btn-default</code>
						常用按钮<code>.btn-primary</code>
						成功按钮<code>.btn-success</code>
						信息按钮<code>.btn-info</code>
						危险按钮<code>.btn-danger</code>
						警示按钮<code>.btn-warning</code>
						禁用按钮<code>disabled="true"</code>
					</p>
					<div class="row">
						<div class="col-sm-12">							
							<button type="button" class="btn btn-default">默认按钮</button>
							<button type="button" class="btn btn-primary">常用按钮</button>
							<button type="button" class="btn btn-success">成功按钮</button>
							<button type="button" class="btn btn-info">信息按钮</button>
							<button type="button" class="btn btn-danger">危险按钮</button>
							<button type="button" class="btn btn-warning">警示按钮</button>
							<button type="button" class="btn btn-default" disabled="true">禁用按钮</button>
						</div>
					</div>
					<h3>按钮尺寸</h3>
					<p> 超大按钮<code>.btn-lg</code>
						缩小按钮<code>.btn-sm</code>
						超小按钮<code>.btn-xs</code>
					</p>
					<div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn btn-default btn-lg">超大按钮</button>
							<button type="button" class="btn btn-default">默认按钮</button>						
							<button type="button" class="btn btn-default btn-sm">缩小按钮</button>
							<button type="button" class="btn btn-default btn-xs">超小按钮</button>
						</div>
					</div>
					<h3>自适应尺寸</h3>
					<p> 自适应按钮<code>.btn-block</code>
					</p>
					<Div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn btn-default btn-block">自适应按钮</button>
						</div>
					</Div>
					<h3>圆角/尖角按钮</h3>
					<p> 默认圆角 
						尖角按钮增加<code>.btn-flat</code>样式
					</p>
					<div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn btn-default">圆角按钮</button>
							<button type="button" class="btn btn-default btn-flat">尖角按钮</button>
						</div>
					</div>
					<h3>图标按钮&混搭</h3>					
					<div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn btn-default"><i class="fa fa-star"></i></button>
							<button type="button" class="btn btn-primary"><i class="fa fa-edit"></i></button>
							<button type="button" class="btn btn-danger"><i class="fa fa-remove"></i></button>
							<button type="button" class="btn btn-default"><i class="fa fa-plus"></i></button>
							<button type="button" class="btn btn-default"><i class="fa fa-minus"></i></button>
							<button type="button" class="btn btn-default"><i class="fa fa-chevron-left"></i></button>
							<button type="button" class="btn btn-default"><i class="fa fa-chevron-right"></i></button>
							<button type="button" class="btn btn-success"><i class="fa fa-play"></i> 播放</button>
							<button type="button" class="btn btn-warning"><i class="fa fa-pause"></i> 暂停</button>
							<button type="button" class="btn btn-danger"><i class="fa fa-stop"></i> 停止</button>							
						</div>

					</div>					
					<h3>横向按钮组</h3>
					<p> 按钮组 样式<code>.btn-group</code> 
					</p>
					<div class="row">
						<div class="col-sm-12">
							<div class="btn-group">
                                <button type="button" class="btn btn-default">增加</button>
                                <button type="button" class="btn btn-default">编辑</button>
                                <button type="button" class="btn btn-default">删除</button>
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-primary"><i class="fa fa-edit"></i></button>
                                <button type="button" class="btn btn-primary"><i class="fa fa-remove"></i></button>
                            </div>
                            
                            <div class="btn-group">
                                <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> 增加</button>
                                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i> 编辑</button>
                                <button type="button" class="btn btn-danger"><i class="fa fa-remove"></i> 删除</button>
                            </div>
						</div>
					</div>
					<h3>纵向按钮组</h3>
					<p> 按钮组样式<code>.btn-group-vertical</code> 
					<div class="row">
						<div class="col-sm-12">
							<div class="btn-group-vertical">
                                <button type="button" class="btn btn-default">增加</button>
                                <button type="button" class="btn btn-default">编辑</button>
                                <button type="button" class="btn btn-default">删除</button>
                            </div>
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i></button>
                                <button type="button" class="btn btn-primary"><i class="fa fa-edit"></i></button>
                                <button type="button" class="btn btn-primary"><i class="fa fa-remove"></i></button>
                            </div>
                            
                            <div class="btn-group-vertical">
                                <button type="button" class="btn btn-default"><i class="fa fa-plus"></i> 增加</button>
                                <button type="button" class="btn btn-default"><i class="fa fa-edit"></i> 编辑</button>
                                <button type="button" class="btn btn-danger"><i class="fa fa-remove"></i> 删除</button>
                            </div>
						</div>
					</div>
					<h3>下拉按钮组&混搭组</h3>
					<p> 按钮组样式<code>.btn-group</code>,在其内部的button样式<code>.dropdown-toggle</code>,并增加<code>data-toggle="dropdown"</code>来调用脚本
					<div class="row">
						<div class="col-sm-12">
							<div class="btn-group">
                                <button type="button" class="btn btn-default">新增</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">点击转换</span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">编辑</a></li>
                                    <li><a href="#">注意下面的分组线</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">删除</a></li>
                                </ul>
                           </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i> 新增</button>
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                    <span class="sr-only">点击转换</span>
                                </button>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#"><i class="fa fa-edit"></i> 编辑</a></li>
                                    <li><a href="#">注意下面的分组线</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#"><i class="fa fa-remove"></i> 删除</a></li>
                                </ul>
                            </div>
						</div>
					</div>
					<h3>其他背景色按钮</h3>
					<p> 样式为<code>.bg-*</code> 如maroon、purple、navy、orange、olive
					<div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn bg-maroon">褐红色</button>
                            <button type="button" class="btn bg-purple">紫色</button>
                            <button type="button" class="btn bg-navy">海军蓝</button>
                            <button type="button" class="btn bg-orange">橙色</button>
                            <button type="button" class="btn bg-olive">橄榄绿</button>
						</div>
					</div>
					<h3>社交按钮</h3>
					<p> 样式为<code>.btn-social</code>&<code>.btn-social-icon</code>
					<div class="row">
						<div class="col-sm-6">
							<a class="btn btn-block btn-social btn-bitbucket">
                            <i class="fa">1</i> Sign in with Bitbucket
                        </a>
                        <a class="btn btn-block btn-social btn-dropbox">
                            <i class="fa">2</i> Sign in with Dropbox
                        </a>
                        <a class="btn btn-block btn-social btn-facebook">
                            <i class="fa fa-facebook"></i> Sign in with Facebook
                        </a>
                        <a class="btn btn-block btn-social btn-flickr">
                            <i class="fa fa-flickr"></i> Sign in with Flickr
                        </a>
                        <a class="btn btn-block btn-social btn-foursquare">
                            <i class="fa fa-foursquare"></i> Sign in with Foursquare
                        </a>
                        <a class="btn btn-block btn-social btn-github">
                            <i class="fa fa-github"></i> Sign in with GitHub
                        </a>
                        <a class="btn btn-block btn-social btn-google">
                            <i class="fa fa-google-plus"></i> Sign in with Google
                        </a>
                        <a class="btn btn-block btn-social btn-instagram">
                            <i class="fa fa-instagram"></i> Sign in with Instagram
                        </a>
                        <a class="btn btn-block btn-social btn-linkedin">
                            <i class="fa fa-linkedin"></i> Sign in with LinkedIn
                        </a>
                        <a class="btn btn-block btn-social btn-tumblr">
                            <i class="fa fa-tumblr"></i> Sign in with Tumblr
                        </a>
                        <a class="btn btn-block btn-social btn-twitter">
                            <i class="fa fa-twitter"></i> Sign in with Twitter
                        </a>
                        <a class="btn btn-block btn-social btn-vk">
                            <i class="fa fa-vk"></i> Sign in with VK
                        </a>
                        </div>
                        <div class="col-sm-6">
                            <a class="btn btn-social-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
                            <a class="btn btn-social-icon btn-dropbox"><i class="fa fa-dropbox"></i></a>
                            <a class="btn btn-social-icon btn-facebook"><i class="fa fa-facebook"></i></a>
                            <a class="btn btn-social-icon btn-flickr"><i class="fa fa-flickr"></i></a>
                            <a class="btn btn-social-icon btn-foursquare"><i class="fa fa-foursquare"></i></a>
                            <a class="btn btn-social-icon btn-github"><i class="fa fa-github"></i></a>
                            <a class="btn btn-social-icon btn-google"><i class="fa fa-google-plus"></i></a>
                            <a class="btn btn-social-icon btn-instagram"><i class="fa fa-instagram"></i></a>
                            <a class="btn btn-social-icon btn-linkedin"><i class="fa fa-linkedin"></i></a>
                            <a class="btn btn-social-icon btn-tumblr"><i class="fa fa-tumblr"></i></a>
                            <a class="btn btn-social-icon btn-twitter"><i class="fa fa-twitter"></i></a>
                            <a class="btn btn-social-icon btn-vk"><i class="fa fa-vk"></i></a>
                        </div>
					</div>
				</div>
			</div>
		</section>
		<script src="../../dist/js/jquery.min.js"></script>
    	<script src="../../dist/js/lanai-ui.min.js"></script>
	</body>
</html>
